<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <h2>退款记录</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <Card style="margin-bottom: 10px;">
            <div class="normal-list-page-hd clearfix">

              起始时间：<DatePicker class="mr-10" type='date' @on-change='startTime($event)' placeholder='Select date' style='width: 200px'></DatePicker>

              结束时间：<DatePicker class="mr-10" type='date' @on-change='endTime($event)' placeholder='Select date' style='width: 200px'></DatePicker>

              <span>订单编号</span>
              <Input placeholder="订单编号" class="mr-10" v-model="queryData.outTradeNo" style="width: 150px" />
              <Button type="primary"  custom-icon="iconfont icon-chaxun" size="small" @click='inQuire'>查询</Button>
            </div>
          </Card>
          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"></Table>
          </div>
          <div>
            <Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" show-total
              show-elevator @on-change="changePage"></Page>

          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import recodeApi from '@/api/bill/recode.js'
import moment from 'moment'
import {
  Message
} from 'iview'
import queryData from '@/view/test/cityTestZj.vue'

export default {
  components: {
    queryData
  },
  name: 'lntegralSet',
  data () {
    return {

      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [{
          title: '订单编号',
          align: 'center',
          key: 'outTradeNo',
          minWidth: 150
        },
          // {
          //                       title: '用户ID',
          //                       align: 'center',
          //                       key: 'buyerLoginId'
          //                   },
        {
          title: '交易号',
          align: 'center',
          minWidth: 150,
          key: 'tradeNo'
        },
          // 开始自动生成
        {
          title: '交易时间',
          align: 'center',
          key: 'payTime',
          minWidth: 120
        },
        {
          title: '订单金额',
          align: 'center',
          key: 'refundAmount',
          minWidth: 100,
          render: (h, params) => {
            if (params.row.refundWay == '1') {
              return h('div', params.row.refundAmount)
            } else if (params.row.refundWay == '2') {
              return h('div', params.row.refundAmount / 100)
            }
          }
        },
        {
          title: '退款金额',
          align: 'center',
          key: 'refundAmount',
          minWidth: 100,
          render: (h, params) => {
            if (params.row.refundWay == '1') {
              return h('div', params.row.refundAmount)
            } else if (params.row.refundWay == '2') {
              return h('div', params.row.refundAmount / 100)
            }
          }
        }, {
          title: '支付方式',
          key: 'refundWay',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            if (params.row.refundWay == '1') {
              return h('div', [h('p', {
                style: 'color: #17c1dc'
              }, '支付宝')])
            } else if (params.row.refundWay == '2') {
              return h('div', [h('p', {
                style: 'color: #228B22'
              }, '微信')])
            }
          }
        },
        {
          title: '退款原因',
          align: 'center',
          key: 'reason',
          minWidth: 100
        },
        {
          title: '订单状态',
          key: 'result',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            if (params.row.result == '') {
              return h('div', [h('p', {
                style: 'color: #98F5FF'
              }, '支付成功')])
            } else if (params.row.result == '1') {
              return h('div', [h('p', {
                style: 'color: #CD6600'
              }, '已退款')])
            } else if (params.row.result == '2') {
              return h('div', [h('p', {
                style: 'color: #EE0000'
              }, '退款失败')])
            }
          }
        }

        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: null,
        month: null

      }
    }
  },
  methods: {
    startTime (e) {
      let that = this
      that.queryData.startTime = e
    },
    endTime (e) {
      let that = this
      that.queryData.endTime = e
    },
    orderId (e) {
      alert(e)
      let that = this
      that.queryData.tradeType = e
    }, // 获取列表
    getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      recodeApi.getPageList(that.queryData)
        .then(res => {
          that.list.tableData = res.data.list

          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.limit = res.data.pageSize
        })
        .catch(error => {
          Message.error(error)
        })
    },
    // 查询
    inQuire () {
      const that = this
      that.queryData.page = 1
      that.getTableData()
    },

    // 全选，不全选
    // selectionChange(args) {
    //   this.list.selections = args;
    // },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    }

  },

  created () {
    this.getTableData()
  }
}
</script>
